<template>
  <h2>组合api改写todolist</h2>

  <hr />

  <button @click="minus">-</button>
  <span>{{ count }}</span>
  <button @click="add">+</button>

  <hr />

  <input type="text" v-model="value" />
  <button @click="submit">添加</button>
  <ul>
    <li v-for="item in list" :key="item.id">
      {{ item.name }} - <button @click="remove(item.id)">删除</button>
    </li>
  </ul>
</template>

<script>
import { ref } from "vue";
import counter from "@/utils/useCounter";
export default {
  setup() {
    const [count, add, minus] = counter();
    const [value, list, submit, remove] = todolist();

    return {
      count,
      add,
      minus,
      value,
      list,
      submit,
      remove,
    };
  },
};

// todolist功能
const todolist = () => {
  const value = ref("");
  const list = ref([
    {
      name: "zhangsan",
      id: 1,
    },
    {
      name: "lisi",
      id: 2,
    },
  ]);
  const submit = () => {
    list.value.push({
      name: value.value,
      id: new Date().getTime(),
    });
    value.value = "";
  };
  const remove = (id) => {
    list.value = list.value.filter((item) => item.id !== id);
  };
  return [value, list, submit, remove];
};
</script>
